@charset "utf-8";
@font-face {
    font-family: "FontAwesome";
    src: url("font/fontawesome-webfont.woff?v=3.0.1") format("woff"),
         url("chrome-extension://__MSG_@@extension_id__/font/fontawesome-webfont.woff?v=3.0.1") format("woff"),
         url("font/fontawesome-webfont.ttf?v=3.0.1") format("truetype"),
         url("chrome-extension://__MSG_@@extension_id__/font/fontawesome-webfont.ttf?v=3.0.1") format("truetype");
}
@-webkit-keyframes popIn{
	0% {
        opacity:0;
        -webkit-transform:scale(0);
        -webkit-animation-timing-function:ease-in;
    }
    60% {
  	    opacity:0.8;
  	    -webkit-transform:scale(1.2);
  	    -webkit-animation-timing-function:ease-out;
    }
    100% {
  	    opacity:1;
  	    -webkit-transform:scale(1);
    }
}
@-moz-keyframes popIn{
	0% {
        opacity:0;
        -moz-transform:scale(0);
        -moz-animation-timing-function:ease-in;
    }
    80% {
  	    opacity:0.8;
  	    -moz-transform:scale(1.2);
  	    -moz-animation-timing-function:ease-out;
    }
    100% {
  	    opacity:1;
  	    -moz-transform:scale(1);
    }
}
#codecola,
#codecola label,
#codecola input,
#codecola p,
#codecola form,
#codecola ol,
#codecola ul,
#codecola li,
#codecola a,
#codecola select,
#codecola textarea,
#codecola button,
#codecola ccfieldset,
#codecola ccu,
#codecola ccs,
#codecola ccb,
#codecola cccode,
#codecola cclegend {
    font: normal normal normal 12px/1.5 "Helvetica Neue", Helvetica, arial , san-serif;
    margin: 0;
    padding: 0;
}

.codecola-wrap {
    background-color: #292929;
    border: 5px solid rgba(0, 0, 0, 0.4);
    background-clip: padding-box;
    padding: 5px 10px;
    text-shadow: 1px 1px 0 #000;
    z-index: 2147483646;
}

#codecola .codecola-icon,
#codecola .codecola-icon::before{
    font: 14px/20px "FontAwesome";
    color: rgb(100,100,100);
    width: 20px;
    height: 20px;
    text-align: center;
    vertical-align: middle;
    text-shadow: 1px 1px 0 rgba(0,0,0,0.5);
    -webkit-font-smoothing: antialiased;
    cursor: pointer;
}

#codecola .codecola-icon:hover,
#codecola .codecola-icon::before:hover{
    color: #ccc;
    text-decoration: none;
}

#codecola .codecola-code{
    font-family: monospace, consolas;
    background-color: #f0f0f0;
}

#codecola ccfieldset {
    display: block;
}

#codecola input,
#codecola input:focus,
#codecola select,
#codecola textarea,
#codecola textarea:focus {
    border-radius: 0;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    color: #000;
}

#codecola button {
    padding: 0 5px;
}

#codecola textarea {
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
}

#codecola ul,
#codecola ol,
#codecola li {
    list-style: none;
}

#codecola {
    padding: 0 5px 5px 6px;
    position: fixed;
    right: 5px;
    text-align: left;
    top: 5px;
    width: 300px;
    color: #fff;
    -webkit-transition: opacity .2s;
    -moz-transition: opacity .2s;
    transition: opacity .2s;
}

#codecola.cc-fade {
    opacity: .7;
}

ol#codecola-selectors {
    border-width: 4px;
    color: #ccc;
    opacity: 0;
    position: fixed;
    top: -2000px;
    -webkit-transition: opacity .3s ease-out;
    -moz-transition: opacity .3s ease-out;
    transition: opacity .3s ease-out;
    min-width: 150px;
    padding: 5px 10px;
}

#codecola-selectors .tag-selector,
#codecola-selectors .class-selector {
    border-bottom: 1px solid #111;
    padding: 2px 0;
    cursor: pointer;
    -webkit-transition: padding 0.2s ease-out;
    -moz-transition: padding 0.2s ease-out;
    transition: padding 0.2s ease-out;
}

#codecola-selectors .tag-selector:hover,
#codecola-selectors .class-selector:hover {
    color: #fff;
    background-color: #333;
    padding-left: 5px;
}

#codecola-selectors li:last-child {
    border: none;
}

#codecola #codecola-current-info {
    color: #d9d9d9;
    padding-bottom: 2px;
}

#codecola #codecola-current-node {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 62px;
    display: inline-block;
}

#codecola #codecola-open-all {
    background-color: #3B3B3B;
    border: 1px solid #000;
    cursor: pointer;
    display: inline-block;
    float: right;
    height: 18px;
    overflow: hidden;
    position: relative;
    width: 40px;
    top: -2px;
    right: 0;
}

#codecola #codecola-open-all ccu,
#codecola #codecola-open-all ccb {
    display: inline-block;
    height: 18px;
    position: absolute;
}

#codecola #codecola-open-all ccu {
    background-color: #595959;
    border: 1px solid #1D1D1D;
    border-width: 0 1px;
    width: 20px;
    -webkit-transition: left .2s ease-out;
    -moz-transition: left .2s ease-out;
    transition: left .2s ease-out;
    left: -1px;
}

#codecola #codecola-open-all ccb {
    background-color: #4169af;
    top: 0;
    left: 0;
    width: 20px;
}

#codecola.codecola-allOpen #codecola-open-all ccu {
    left: 19px;
}

#codecola ul {
    padding-right: 5px;
    margin-top: 2px;
    max-height: 510px;
    overflow-y: auto;
    overflow-x: hidden;
}

#codecola ul::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

#codecola ul::-webkit-scrollbar-track-piece {
    background-color: #000;
}

#codecola ul::-webkit-scrollbar-thumb {
    background-color: #292929;
    border: 1px solid #000;
}

#codecola ul.cc-close {
    padding: 0 5px 0;
    max-height: 0;
}

#codecola .codecola-item .codecola-item-title{
    position: relative;
    margin: 0;
    color: #888;
    padding-top: 8px;
    overflow: hidden;
}

#codecola .codecola-item .codecola-item-title:hover{
    color: #ccc;
}

#codecola .codecola-item .codecola-item-title::before{
    font-family: "FontAwesome";
    content: "\f0da";
    display: inline-block;
    width: 10px;
}

#codecola .codecola-item-open .codecola-item-title::before {
    content: "\f0d7";
}

#codecola .codecola-item .codecola-item-title label {
    font-size: 14px;
}

#codecola cccode {
    color: #fff;
}

#codecola .codecola-editorWrap,
#codecola #codecola-styles{
    border: 1px solid #000;
    border-color: #000 rgba(0,0,0,.25) rgba(0,0,0,.25) #000;
    margin: 0 1px 0 0;
    padding: 0 10px;
    height: 0;
    -webkit-transition: all .1s ease-out;
    -moz-transition: all .1s ease-out;
    transition: all .1s ease-out;
    overflow: hidden;
    position: relative; /*mac os chrome overflow hidden bug*/
}

#codecola .codecola-editorWrap {
    background-color: #474747;
}

#codecola .codecola-disable .codecola-editorWrap::after{
    content: '\20';
    background-color: rgba(0,0,0,.25);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

#codecola #codecola-styles{
    padding: 0 5px;
    display: block;
    width: 100%;
    -webkit-box-sizing: border-box;
    resize: none;
    border-color: #282828;
}

#codecola .codecola-item{
    display: none;
}

#codecola .codecola-item-open .codecola-editorWrap {
    height: auto;
    padding: 10px;
    border-color: #000;
}

#codecola #codecola-styles.cc-open{
    height: 100px;
    padding: 5px;
    border: 1px solid #000;
}

#codecola input {
    vertical-align: middle;
}

#codecola input[type="range"] {
    width: 128px;
    color: #fff;
}

#codecola input[type="file"] {
    width: 205px;
}

#codecola input[type="text"]:disabled,
#codecola input[type="number"]:disabled {
    color: #F5F4EA;
    background-color: #ccc;
    border-color: #222;
}

#codecola input[type="checkbox"],
#codecola input[type="radio"] {
    vertical-align: text-bottom;
}

#codecola input[type="text"],
#codecola input[type="number"],
#codecola .codecola-degree-input {
    border: 1px solid #000;
    -webkit-box-shadow: 1px 1px 0 #555;
    -moz-box-shadow: 1px 1px 0 #555;
    box-shadow: 1px 1px 0 #555;
    padding: 0;
}

#codecola option:nth-child(2n+1) {
    background-color: #eee;
}

#codecola ccfieldset .codecola-color-editorWrap {
    padding-left: 48px;
    width: 192px;
    margin-top: -20px;
}

/*TODO*/
#codecola #codecola-item-webkitBoxReflect ccfieldset .codecola-color-editorWrap {
    padding-left: 0;
    width: auto;
    margin-top: 0;
}

#codecola-webkitBoxReflectGradient {
    margin-top: 30px;
}

#codecola .codecola-hsb-current {
    overflow: hidden;
}

#codecola .codecola-hsb-current label {
    float: left;
    margin-top: 2px;
}

#codecola .codecola-hsb {
    margin: 5px 0;
}

#codecola .codecola-hsb-range input {
    width: 194px;
}

#codecola .codecola-hsb-current input,
#codecola .codecola-currentStyle,
#codecola .codecola-degree-input,
#codecola .codecola-color-picker .codecola-color-current input {
    width: 42px;
    height: 15px;
    background-color: #7f7f7f;
}

#codecola .codecola-hsb-current input {
    float: right;
    margin-right: 2px;
}

#codecola .codecola-currentStyle,
#codecola .codecola-color-picker .codecola-color-current input {
    margin-left: 5px;
    line-height: 15px;
}

#codecola .codecola-color-picker input[type="range"] {
    width: 100%;
}

#codecola .codecola-hsb-img {
    height: 5px;
    margin-top: 3px;
    background-image: url();
    background-repeat: no-repeat;
}

#codecola .codecola-hsbH .codecola-hsb-img {
    background-position: 0 0;
}

#codecola .codecola-hsbS .codecola-hsb-img {
    background-position: 0 -5px;
}

#codecola .codecola-hsbB .codecola-hsb-img {
    background-position: 0 -10px;
}

#codecola .codecola-editor-multi ccfieldset {
    border-bottom: 1px solid #000;
    border-top: 1px solid #555;
    padding: 10px 0;
    position: relative;
}

#codecola .codecola-editor-multi ccfieldset:last-child {
    border-bottom: none;
}

#codecola .codecola-editor-multi ccfieldset:first-child {
    border-top: none;
}

#codecola .codecola-editor-multi ccfieldset cclegend {
    position: absolute;
    top: 10px;
    right: 0;
    color: #ddd;
    background-color: #111;
    border-radius: 4px;
    padding: 1px 5px;
}

#codecola ccfieldset ol label:first-child,
#codecola .codecola-color-picker label {
    display: inline-block;
    width: 48px;
    margin-bottom: 5px;
    font-size: 11px;
    -webkit-text-size-adjust: none;
}

#codecola .codecola-color-picker .codecola-color-current label {
    width: auto;
    margin: 0;
}

#codecola ccfieldset li {
    margin: 2px 0;
}

#codecola #codecola-item-fontOther .codecola-editorWrap label,
#codecola #codecola-item-textAlign .codecola-editorWrap label {
    margin-right: 10px;
}

#codecola-option:after,
codecola-current-info:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

#codecola-fold {
    cursor: pointer;
    float: right;
    height: 20px;
    width: 20px;
    position: relative;
    top: -5px;
    right: 0;
}

#codecola-fold ccs,
#codecola-fold ccb {
    border: 1px solid #888;
    border-width: 2px 1px 1px;
    background-color: #292929;
    display: inline-block;
    height: 5px;
    width: 8px;
    top: 5px;
    left: 6px;
    position: absolute;
}

#codecola-fold ccb {
    top: 8px;
    left: 4px;
}

#codecola-fold.cc-close ccb {
    display: none;
}

#codecola-fold.cc-close ccs {
    top: 9px;
    border-width: 2px 0 0;
    left: 5px;
    width: 10px;
}

#codecola-fold:hover ccs,
#codecola-fold:hover ccb {
    border-color: #ccc;
}

#codecola-show-about{
    float: right;
    margin: -5px 0 0 2px;
}
#codecola-show-about::after {
    content: "\f05a";
}

#codecola-drag {
    overflow: hidden;
    height: 10px;
    cursor: move;
    margin: 6px 5px 10px 0;
    background: -webkit-linear-gradient(90deg,rgba(0,0,0,0) 50%,#888 50%) repeat 0 0;
    background-size: 2px 2px;
}

.codecola-opt-button {
    border: 1px solid #292929;
    float: right;
    top: -2px;
    position: relative;
    margin-right: 2px;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
}

#codecola-getStyles,
#codecola-getHTML {
    font: bold 12px/18px arial !important;
    letter-spacing: 1px;
}

#codecola-switch::after{
    content: "\f002";
}

#codecola-share::after{
    content: "\f045";
}

#codecola-getNote::after{
    content: "\f0f6";
}

#codecola-save::after{
    content: "\f0c7";
}

#codecola .codecola-opt-button.cc-open,
#codecola .codecola-opt-button:active {
    border-color: #000;
    background-color: #666;
    color: #ccc;
}

#codecola .codecola-opt-button.cc-open:hover {
    background-color: #777;
}

#codecola .codecola-item .codecola-icon {
    float: right;
}

#codecola .codecola-compatibility::after{
    content: "\f0ac";
}

#codecola .codecola-cancel::after{
    content: "\f0e2";
}

#codecola .codecola-eye::after{
    content: "\f06e";
}

#codecola .codecola-eye.cc-close::after{
    content: "\f070";
}

#codecola .codecola-degree-wrap,
#codecola-textShadowDegree,
#codecola-boxShadowDegree{
    color: #fff;
    display:inline-block;
}

#codecola-getHTML-wrap,
#codecola-save-wrap,
#codecola-about-wrap,
#codecola-finder-wrap {
    display: none;
    padding: 25px 5px 5px;
    position: fixed;
    color: #fff;
    z-index: 2147483647;
}

#codecola-save-wrap,
#codecola-finder-wrap,
#codecola-about-wrap {
    width: 300px;
    left: 50%;
    top: 50%;
    margin-left: -150px;
    margin-top: -100px;
}

#codecola-save-wrap.loadding,
#codecola-finder-wrap.cc-open,
#codecola-about-wrap.cc-open {
    -webkit-animation: popIn 0.5s;
    -moz-animation: popIn 0.5s;
    display: block;
}

.codecola-pop-title {
    position: absolute;
    left: 5px;
    top: 5px;
    color: #888;
}

.codecola-pop-close {
    position: absolute;
    right: 1px;
    top: 1px;
}

.codecola-pop-close::before {
    content: "\f00d";
}

#codecola-getHTML-wrap.loadding {
    display: block;
    top: 5px;
    left: 5px;
}

#codecola-getHTML-wrap.cc-open {
    right: 5px;
    bottom: 5px;
}

#codecola-getHTML-content,
#codecola-save-content,
#codecola-finder-content {
    width: 100%;
    height: 100%;
    padding: 0;
    background-color: #555;
    border: 1px solid black;
    resize: none;
}

#codecola-show-currentNode {
    color: #888;
    padding: 0 1px;
    cursor: help;
    border-bottom: 1px dotted #888;
}

#codecola-show-currentNode:hover {
    color: #fff;
    border-color: #fff;
}

#codecola-about-wrap {
    width: 420px;
    height: 150px;
    margin-left: -220px;
    margin-top: -150px;
}

#codecola-about-wrap .codecola-about-global {
    height: 100px;
    padding: 5px 10px;
    background: url(128.png) no-repeat 10px 10px #474747;
    background-image: url(chrome-extension://__MSG_@@extension_id__/128.png);
    background-size: 60px;
    position: relative;
}

#codecola-about-wrap .codecola-about-version {
    color: #ccc;
    padding-left: 80px;
    margin-top: -5px;
}

#codecola-about-wrap .codecola-about-author {
    font-size: 10px;
    -webkit-text-size-adjust: none;
}

#codecola-about-wrap .codecola-about-name {
    font-size: 30px;
    line-height: 1.2;
    padding-top: 6px;
    padding-left: 75px;
    font-family: georgia;
    background: none;
}

#codecola-about-wrap .codecola-about-detail {
    color: #888;
}

#codecola-about-wrap .codecola-about-doc {
    margin: 3px 0;
}

#codecola-about-wrap .codecola-about-content a {
    color: #ccc;
    background: none;
    text-decoration: underline;
}

#codecola-about-wrap .codecola-about-author a {
    color: #888;
}

#codecola-about-wrap .codecola-about-wrap a:hover {
    color: #fff;
}

#codecola-mask {
    position: fixed;
    z-index: 2147483645;
    left: -100px;
    background-color: rgba(42, 134, 219, 0.42);
    pointer-events: none;
}

#codecola .codecola-color-transparent{
    vertical-align: middle;
}

.codecola-selecting{
    outline: 2px solid rgba(42, 134, 219, 0.42);
}